<template>
	<!-- 分享邀请 -->
	<view class="invite" v-if="vipInfo">
		<view class="" v-html="vipInfo.desc"></view>
		
		<view class="invite-btn" :style="bottomStyle">
			<view class="btn" v-if="!vipInfo.is_vip" @click="getuserVipOpen">
				<text style="font-size: 30rpx;margin-right: 10rpx;font-weight: bold;">￥{{vipInfo.price}}</text> 永久开通会员
			</view>
			<view class="btn" v-else>
				已开通
			</view>
		</view>
	</view>
</template>

<script>
import { userVip, userVipOpen } from '../../api/home/index.js';
export default {
	data() {
		return {
			vipInfo:null
		};
	},
	onLoad() {
		this.getuserVip()
	},
	computed: {
		bottomStyle() {
			const systemInfo = uni.getSystemInfoSync();
			const { safeAreaInsets } = systemInfo;
			const bottomSafeAreaHeight = safeAreaInsets.bottom || 0;
			return `padding-bottom: ${bottomSafeAreaHeight ? bottomSafeAreaHeight + 'px' : '20rpx'}`;
		}
	},
	methods: {
		async getuserVip(){
			try {
				const resData = await userVip();
				this.vipInfo = resData.data;
			} catch (e) {
				throw Error(e);
			}
		},
		
		// 开通会员
		async getuserVipOpen(){
			try{
				const resData = await userVipOpen();
				uni.showToast({
					title:'开通会员成功',
					icon:'none'
				})
				setTimeout(()=>{
					uni.navigateBack(-1);
				},200)
			}catch(e){
				throw Error(e)
			}
		}
	}
};
</script>

<style>
	page{
		background-color: #fff;
	}
</style>

<style lang="scss" scoped>
	.invite-btn {
		position: fixed;
		bottom: 0rpx;
		left: 0px;
		width: 100%;
		display: flex;
		align-items: center;
		box-sizing: border-box;
		padding: 0px 20rpx;
		padding-top: 20rpx;
		background-color: #fff;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
		.btn{
			background-color: #e43927;
			height: 80rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 28rpx;
			width: 100%;
			color: #fff;
			border-radius: 10rpx;
			
		}
	}
</style>
